<template>
  <dv-border-box-8 style="height: 100vh;display: flex">
    <div style="width: 100%;height: 2%;"/>

    <dv-border-box-11 title="智慧健康远程检测平台" style="width: 95%;height: 96%;margin: auto">
      <div style="width: 100%;height: 5%"/>

      <div style="width: 100%;height: 10%;font-size: 20px;display: flex">
        <div class="tabs" style="width: 45%;height: 100%;margin: auto;display: flex">
          <div :style="{color: fontColor_left[0]}" @click="tabClick1">全部设备</div>
          <div :style="{color: fontColor_left[1]}" @click="tabClick2">心电设备</div>
          <div :style="{color: fontColor_left[2]}" @click="tabClick3">血压设备</div>
          <div :style="{color: fontColor_left[3]}" @click="tabClick4">血氧设备</div>
        </div>

        <div class="tabs" style="width: 45%;height: 100%;margin: auto;display: flex;">
          <div :style="{color: fontColor_right[0]}" @click="tabClick5">立即搜索</div>
          <div :style="{color: fontColor_right[1]}" @click="tabClick6">布局设置</div>
          <div :style="{color: fontColor_right[2]}" @click="tabClick7">数据脱敏</div>
          <div :style="{color: fontColor_right[3]}" @click="tabClick8">数据统计</div>
        </div>
      </div>

      <div class="screen" style="width: 100%;height: 85%;display: grid;grid-template-columns: repeat(3, 1fr)">
        <div v-for="item in deviceList">
          <dv-border-box-10 style="width: 90%; height: 50vh;margin: auto">
            <div style="width: 100%;height: 5%"/>

            <div style="width: 90%;height: 5%;color: #97a8be;margin: auto;display: flex">
              <div style="margin: auto">姓名：{{item.name}}</div>
              <div style="margin: auto">年龄：{{item.age}}</div>
              <div style="margin: auto">设备：{{item.type}}</div>
            </div>

            <div style="width: 100%;height: 5%"/>

            <div style="width: 90%;height: 80%;margin: auto;display: flex">

              <div class="screen1" style="width: 100%;height: 100%;margin: auto"/>

              <div style="width: 100%;height: 100%;margin: auto">
                <div class="screen2" style="width: 100%;height: 50%"/>

                <div class="screen3" style="width: 100%;height: 50%"/>
              </div>
            </div>
          </dv-border-box-10>

          <div style="width: 100%;height: 2vh"/>
        </div>
      </div>

    </dv-border-box-11>
  </dv-border-box-8>
</template>

<script>
// https: //blog.csdn.net/zjh980622/article/details/132686828
import dataV from '@jiaminghi/data-view'
import * as echarts from 'echarts'
import Vue from "vue";

Vue.use(dataV)

export default {
  name: "Aalldevice",
  data() {
    return {
      fontColor_left: [
        '#97a8be', '#97a8be', '#97a8be', '#97a8be',
      ],
      fontColor_right: [
        '#97a8be', '#97a8be', '#97a8be', '#97a8be',
      ],
      deviceList: [
        {
          name: 'name1',
          age: 80,
          type: '心电设备',
          option1: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'//字体颜色
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option2: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'//字体颜色
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option3: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'//字体颜色
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
        },{
          name: 'name2',
          age: 80,
          type: '心电设备',
          option1: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'//字体颜色
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option2: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'//字体颜色
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
          option3: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'//字体颜色
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
        },{
          name: 'name3',
          age: 80,
          type: '心电设备',
          option1: {
            tooltip: {
            },
            legend: {
              textStyle: {
                color: '#97a8be'//字体颜色
              },
              data: ['销量']
            },
            xAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
              data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {
              axisLabel: {
                color: '#97a8be'//字体颜色
              },
            },
            series: [{
              name: '销量',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          },
        },{
          name: 'name4',
          age: 80,
          type: '心电设备'
        },{
          name: 'name5',
          age: 80,
          type: '心电设备'
        },
      ]
    };
  },
  mounted() {
    this.tabClick1()
  },
  methods: {
    tabClick1() {
      this.fontColor_left = ['#004d8c', '#97a8be', '#97a8be', '#97a8be'];

      const charts1 = document.getElementsByClassName('screen1');
      const charts2 = document.getElementsByClassName('screen2');
      const charts3 = document.getElementsByClassName('screen3');
      for (let i = 0; i < this.deviceList.length; i++) {
        let myEcharts1 = echarts.init(charts1[i]);
        myEcharts1.setOption(this.deviceList[i].option1);

        let myEcharts2 = echarts.init(charts2[i]);
        myEcharts2.setOption(this.deviceList[i].option2);

        let myEcharts3 = echarts.init(charts3[i]);
        myEcharts3.setOption(this.deviceList[i].option3);
      }
    },
    tabClick2() {
      this.fontColor_left = ['#97a8be', '#004d8c', '#97a8be', '#97a8be'];

    },
    tabClick3() {
      this.fontColor_left = ['#97a8be', '#97a8be', '#004d8c', '#97a8be'];

    },
    tabClick4() {
      this.fontColor_left = ['#97a8be', '#97a8be', '#97a8be', '#004d8c'];

    },
    tabClick5() {
      this.fontColor_right = ['#004d8c', '#97a8be', '#97a8be', '#97a8be'];

    },
    tabClick6() {
      this.fontColor_right = ['#97a8be', '#004d8c', '#97a8be', '#97a8be'];

    },
    tabClick7() {
      this.fontColor_right = ['#97a8be', '#97a8be', '#004d8c', '#97a8be'];

    },
    tabClick8() {
      this.fontColor_right = ['#97a8be', '#97a8be', '#97a8be', '#004d8c'];

    },
  }
}
</script>

<style lang="scss">
.screen {
  overflow: auto;
}
.screen::-webkit-scrollbar {
  display: none;
}
.tabs div {
  margin: auto;
}
.tabs div:hover {
  cursor: pointer;
}
</style>
